/*
 * @Description: 档案检测管理操作
 * @Author: Rfan
 * @Date: 2022-10-09 15:57:24
 * @LastEditTime: 2022-10-20 15:21:13
 */

import { useMemo, useState } from 'react';
import { Button, Dropdown, Menu, Space } from 'antd';
import cs from 'classnames';
import { useArchivesDetectionContext } from '../contexts/ArchivesDetectionContext';
import AddPlan from '@/view/system/ArchivesDetection/components/dialogs/AddPlan';
import type { ICheckedObjType } from '@/view/system/ArchivesDetection/interface';
import { EnumDialogType } from '@/view/system/ArchivesDetection/components/dialogs/AddPlan/contexts/AddPlanDialogContext';

const PageOperate = (props: any) => {
  const { classname } = props;
  const { selectItems, checkedObjTypeList, delDetectionPlanFunc } = useArchivesDetectionContext();

  // 新增方案显示状态
  const [addPlanVisible, setAddPlanVisible] = useState(false);
  // 选中的检测对象类型对象
  const [selectObjType, setSelectObjType] = useState<ICheckedObjType>(null);
  /**
   * @description: 删除选中条目
   */
  const deleteSelectItem = () => {
    delDetectionPlanFunc(selectItems, `您已选择了${selectItems.length}条方案，是否确认删除?`);
  };

  /**
   * @description: 新增方案下拉菜单点击事件
   * @param {ICheckedObjType} info 选中的检测对象类型对象
   */
  const onPlanMenuClick = (info: ICheckedObjType): void => {
    setSelectObjType(info);
    setAddPlanVisible(true);
  };

  /**
   * @description: 新建检测方案下拉菜单节点
   * @return {ReactNode}
   */
  const addPlanMenu = (
    <Menu
      items={checkedObjTypeList.map((item: ICheckedObjType) => ({
        key: item.id,
        label: (
          <Button
            type="text"
            onClick={() => {
              onPlanMenuClick(item);
            }}
          >
            {item.name}
          </Button>
        )
      }))}
    />
  );

  return (
    <>
      <div className={cs('filter-container', 'page-operate', classname)}>
        <h6 className="page-title">检测配置表</h6>
        <Space size="small">
          <Button
            disabled={selectItems.length <= 0}
            onClick={() => {
              deleteSelectItem();
            }}
          >
            删除
          </Button>
          <Dropdown overlay={addPlanMenu} placement="bottom" trigger={['click']}>
            <Button>新建检测方案</Button>
          </Dropdown>
        </Space>
      </div>
      {useMemo(
        () =>
          selectObjType && (
            <AddPlan
              visible={addPlanVisible}
              type={EnumDialogType.add as 'add'}
              checkedObjType={selectObjType}
              onClose={() => {
                setAddPlanVisible(false);
              }}
            />
          ),
        [addPlanVisible, selectObjType]
      )}
    </>
  );
};

export default PageOperate;
